<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>校园失物招领</title>
    <link rel="stylesheet" href="../lib/bootstrap.min.css">
    <link rel="stylesheet" href="../lib/verify.css">
    <link rel="stylesheet" href="../css/main.css">
    <link rel="stylesheet" href="../layui/css/layui.css">

    <script src="../lib/jquery-3.3.1.js"></script>
    <script src="../js/application.js"></script>
    <script src="../layui/layui.js"></script>
    <script src="../lib/jquery.params.js"></script>
    <script src="../lib/bootstrap.js"></script>
    <script src="../lib/verify.min.js"></script>

</head>

<body>

    <div class="navbar-default" style="height:25px;">
        <div class="container">
        </div>
    </div>

    <div class="container" style="margin-top: 10px;">
        <div class="col-sm-2" id="sidebar">
            <div class="list-group side-bar hidden-xs" id="channel">
                <a href="#" class="list-group-item active" id="findAll">综合</a>
                <a href="#" class="list-group-item" id="findLost">失物</a>
                <a href="#" class="list-group-item" id="findLoster">拾物</a>
                <a href="#" class="list-group-item" id="noticeList">公告</a>
            </div>
        </div>
        <div class="col-sm-7">
            <div class="newslist" id="newsList">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                    <legend>个人信息修改</legend>
                </fieldset>
                <div class="news-list-item clearfix" style="font-size: 18px;">
                    <h1 class="news-title text-center"></h1>
                    <div class="layui-form-item">
                        <div class="layui-form-item text-center">
                            <div class="layui-upload">

                                <div class="layui-upload-list">
                                    <img class="layui-upload-img" id="userImg" src="../img/user.jpg" width="200px"
                                        height="200px">
                                    <p id="demoText"></p>
                                </div>
                                <button type="button" class="layui-btn" id="avatar">修改头像</button>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">账号</label>
                            <div class="layui-input-inline">
                                <input type="tel" name="userId" autocomplete="off" class="layui-input" id="userId"
                                    readonly="readonly">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">昵称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="email" autocomplete="off" class="layui-input" id="nickName">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">性别</label>
                            <div class="layui-input-inline">
                                <div style="margin-top: 8px;margin-left: 28%;">
                                    <input type="radio" name="gender" value="1" id="man" checked="true"
                                        style="width:20px;height:20px" />男
                                    <input type="radio" name="gender" value="2" id="woman"
                                        style="width:20px;height:20px" />女
                                </div>
                            </div>
                        </div>
                        <!-- <div class="layui-inline">
                            <label class="layui-form-label">密码</label>
                            <div class="layui-input-inline" style="margin-top: 2%;">
                                <a style="font-size: 16px;cursor:pointer;">点击修改密码</div>
                        </div> -->
                    </div>
                </div>
                <div class="layui-form-item text-right">
                    <div class="layui-upload">
                        <button type="button" class="layui-btn layui-btn-normal "
                            style="margin-top: 10%;margin-right: 10%;" id="update">保存</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
    </div>
    <div class="footer">

    </div>
</body>
<script src="../lib/jquery-3.3.1.js"></script>
<script src="../js/application.js"></script>
<script src="../layui/layui.js"></script>
<script>
    var userId = '0';
    var updateUser = function () {
        var nickName=$("#nickName").val();
        var gender = $("input[name=gender]:checked").val();
		layui.use(['layer'], function () {
			$ = layui.$
				, layer = layui.layer
			if (nickName == "" || nickName == undefined) {
				layer.msg("昵称为空");
				return
			}
			if (gender == "" || gender == undefined) {
				layer.msg("性别异常");
				return
			}
			showloading(true);
			$.ajax({
				url: urlapi + 'user/updateUserByWeb',
				data: { nickName: nickName, gender: gender },
				type: "Post",
				dataType: "json",
				success: function (data) {
                    console.log(data)
					showloading(false);
					if (data.code == -9999) {
						layer.msg(data.msg);
					} else {
						layer.msg("修改成功");
						setTimeout(function () {
							$(location).attr('href', 'index.html');
						}, 1000);

					}
				},
				error: function () {
					showloading(false);
					layer.msg('网络异常');
				}
			});
		})
    }

    $("#channel a").on('click', function () {
            var id = $(this).attr("id");
            $(location).attr('href', 'index.html?type=' + id);
        })
    $('#update').on('click',updateUser)


    $(function () {
        var userData;
        //侧栏跟随
        var $sidebar = $("#sidebar"),
            $window = $(window),
            offset = $sidebar.offset(),
            topPadding = 15;

        $window.scroll(function () {
            if ($window.scrollTop() > offset.top) {
                $sidebar.stop().animate({
                    marginTop: $window.scrollTop() - offset.top + topPadding
                });
            } else {
                $sidebar.stop().animate({
                    marginTop: 0
                });
            }
        });

        layui.use('upload', function () {
            var $ = layui.jquery
                , upload = layui.upload;


            //普通图片上传
            var uploadInst = upload.render({
                elem: '#avatar'
                , url: urlapi + 'user/updateAvatar' //改成您自己的上传接口
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#userImg').attr('src', result); //图片链接（base64）
                        this.data = { 'userId': '' };
                    });
                }
                , done: function (res) {
                    // console.log(res)
                    //如果上传失败
                    if (res.code == -1) {
                        var img = userData.avatar;
                        if (img != null && img != "") {
                            $('#userImg').attr('src', urlapi + userData.phone + "/" + userData.avatar); //图片链接（base64）
                        } else {
                            $('#userImg').attr('src', '../img/user.jpg'); //图片链接（base64）
                        }
                        return layer.msg('上传失败');
                    }
                    //上传成功
                    console.log(res)
                }
                , error: function () {
                    //演示失败状态，并实现重传

                }
            });
        })


        layui.use(['layer'], function () {
            $ = layui.$
                , layer = layui.layer
                showloading(true)
            $.ajax({
                url: urlapi + 'user/isLogin',
                data: {},
                type: "Post",
                dataType: "json",
                success: function (data) {
                    showloading(false)
                    if (data.code == -9999) {
                        layer.msg("个人信息获取失败,请重新登陆");
                        setTimeout(function () {
                            $(location).attr('href', 'login.html');
                        }, 1000);
                        return
                    }
                    userData = data.data;
                    userId = userData.userId;
                    if (userData.avatar != null && userData.avatar != '') {
                        $("#userImg").attr('src', urlapi + userData.phone + "/" + userData.avatar);
                    }
                    $("#userId").val(userData.userId);
                    $("#nickName").val(userData.nickName);
                    if (userData.gender == null || userData.gender == 1) {
                        $("#man").prop("checked", true);
                        $("#woman").prop("checked", false);
                    }else{
                        $("#man").prop("checked", false);
                        $("#woman").prop("checked", true);
                    }
                },
                error: function () {
                    showloading(false)
                }
                
            });
        })
    });
</script>

</html>